import {
    AppOutline,
    MessageOutline,
    MessageFill,
    UnorderedListOutline,
    UserOutline,
} from 'antd-mobile-icons'
import { TabBar } from 'antd-mobile'

import '../styles/foot.scss'
import { useTiaoZhuan } from '../hooks/routers'
import { useLocation } from 'react-router-dom'
export const Footers = () => {
    const {Tz}  = useTiaoZhuan();
    const {pathname} = useLocation()
    
    const tabs = [
        {
            key: '/homes/admin',
            title: '首页',
            icon: <AppOutline />,
        },
        {
            key: '/homes/fenlei',
            title: '分类',
            icon: <UnorderedListOutline />,

        },
        {
            key: '/homes/conts',
            title: '消息',
            icon: <MessageFill />
        },
        {
            key: '/homes/my',
            title: '我的',
            icon: <UserOutline />,
        },
    ]
    return (
        <footer style={{fontSize:'17px'}}>
                <TabBar onChange={value =>{
                    console.log(value);
                    
                    Tz(value);
                }
                }
                activeKey={pathname}
                >
                    {tabs.map(item => (
                        <TabBar.Item key={item.key} icon={item.icon} title={item.title}  className='tab'/>
                    ))}
                </TabBar>
        </footer>
    )
}